<template>
  <epgis-nav-container title="基础信息">
    <template #right>
      <div @click="submitMsg"  class="layoutHorizontal" style="align-items: center;">
        <span style="font-size: 14px; ">提交</span>
      </div>
    </template>
    <template #container>
      <div style= "height: 100%; background: #f5f6f9;" class="layoutVerticle">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1" >
            <template #title>
              <div class="detail-title">基础信息</div>
            </template>
            <van-field 
              v-model="userInfo['username']"
              name="昵称"
              label="昵称"
              placeholder="请填写昵称">
            </van-field>
            <van-field 
              v-model="userInfo['wechat']"
              name="微信号"
              label="微信号"
              placeholder="请填写微信号">
            </van-field>
            <van-field 
              v-model="userInfo['sexName']"
              name="性别"
              label="性别"
              disabled
              @focus="unModifyMsg('性别')"
              placeholder="请填写性别">
            </van-field>
            <van-field 
              v-model="userInfo['birthdayName']"
              name="生日"
              label="生日"
              placeholder="请选择所生日"
              disabled
              readonly
              @focus="unModifyMsg('生日')">
            </van-field>
            <van-field 
              v-model="userInfo['heightName']"
              label="身高"
              placeholder="请选择所身高"
              readonly
              @focus="selectPicker(PICKER_TYPE_HEIGHT)">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            <van-field 
              v-model="userInfo['liveCityName']"
              label="居住地"
              placeholder="请选择居住地"
              readonly
              @focus="selectCity(LIVE_CITY)"
              :rules="[{ required: true, message: '请选择居住地' }]">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            <van-field 
              v-model="userInfo['homeTownName']"
              label="家乡"
              placeholder="请选择家乡"
              readonly
              @focus="selectCity(HOME_TOWN)"
              :rules="[{ required: true, message: '请选择家乡' }]">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            <van-field 
              v-model="userInfo['maritalStatusName']"
              label="婚姻状况"
              placeholder="请选择婚姻状况"
              readonly
              @focus="isMaritalStatuPopup = true">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            <van-field 
              v-model="userInfo['emotionStatusName']"
              label="感情状况"
              placeholder="请选择感情状况"
              readonly
              @focus="isEmotionStatuPopup = true">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
          </van-collapse-item>

          <van-collapse-item name="2">
            <template #title>
              <div class="detail-title">个人信息</div>
            </template>
            <van-field 
              v-model="userInfo['school']"
              name="毕业院校"
              label="毕业院校"
              placeholder="请填写毕业院校">
            </van-field>
            <van-field 
              v-model="userInfo['educationLevelName']"
              name="最高学历"
              label="最高学历"
              placeholder="请选择所最高学历"
              readonly
              @focus="selectPicker(PICKER_TYPE_EDUCATION_LEVEL)">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            
            <van-field 
              v-model="userInfo['workIndustryName']"
              label="行业"
              placeholder="请选择行业"
              readonly
              @focus="selectPicker(PICKER_TYPE_WORK_INDUSTRY)">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
            
            <van-field 
              v-model="userInfo['yearlySalaryName']"
              label="年薪"
              placeholder="请选择年薪"
              readonly
              @focus="selectPicker(PICKER_TYPE_YEARLY_SALARY)">
              <template #right-icon>
                <div class="cell-right">
                  <van-icon name="arrow" class="van-cell__right-icon" />
                </div>
              </template>
            </van-field>
          </van-collapse-item>
        </van-collapse>
      </div>

      <van-popup v-model="isTimePopup" position="bottom">
        <van-datetime-picker 
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          title="选择生日"
          type="date"
          @confirm="confirmBirthday"
          @cancel="isTimePopup=false"/>
      </van-popup>
      <van-popup v-model="singlePicker['isShow']" position="bottom">
        <van-picker
          show-toolbar
          :default-index="pickerDefaultIndex"
          value-key="name"
          :title="singlePicker['title']"
          :columns="singlePicker['dataList']"
          @confirm="pikerConfirm"
          @cancel="() => (singlePicker['isShow'] = false)"
        />
      </van-popup>
      <van-popup v-model="isCityPopup" position="bottom">
        <van-area title="城市选择" 
          :area-list="areaList"   
          :value="areaDefaultValue"
          @confirm="confirmPopup"
          @cancel="isCityPopup=false" />
      </van-popup>
      <van-popup v-model="isMaritalStatuPopup" position="bottom">
        <div class="layoutVerticle">
          <div style="text-align: center;font-weight: 500; font-size:16px; padding: 10px 0px;">选择婚姻状况</div>
          <div style="padding: 0px 16px 10px 16px; color: #9296a2;font-size: 13px;">请如实填写婚姻状况，虚假填写可能被封禁，填写后不可随意修改，如需修改需提供婚况证明。</div>
          <van-divider />
          <div @click="selectMaritalStatus(MaritalStatusEnum.MARITAL_STATUS_UNMARRIED)" style="text-align: center; padding: 16px 0px; font-size: 16px;">未婚</div>
          <van-divider />
          <div @click="selectMaritalStatus(MaritalStatusEnum.MARITAL_STATUS_DIVORCE)" style="text-align: center; padding: 16px 0px; font-size: 16px;">离异</div>
          <van-divider />
          <div @click="selectMaritalStatus(MaritalStatusEnum.MARITAL_STATUS_WIDOWED)" style="text-align: center; padding: 16px 0px; font-size: 16px;">丧偶</div>
          <van-divider />
        </div>
      </van-popup>
      <van-popup v-model="isEmotionStatuPopup" position="bottom">
        <div class="layoutVerticle">
          <div style="text-align: center;font-weight: 500; font-size:16px; padding: 10px 0px;">选择感情状况</div>
          <van-divider />
          <div @click="selectEmotionStatus(EmotionStatusEnum.EMOTION_STATUS_SINGLE)" class="layoutVerticle" style="padding: 16px 0px; align-items: center;">
            <span>单身中</span>
            <span style="color: #9296a2;font-size: 12px; margin-top: 3px;">寻觅模式，推荐优质嘉宾，看有趣故事</span>
          </div>
          <van-divider />
          <div @click="selectEmotionStatus(EmotionStatusEnum.EMOTION_STATUS_UNSINGLE)"  class="layoutVerticle" style="padding: 16px 0px; align-items: center;">
            <span>已脱单</span>
            <span style="color: #9296a2;font-size: 12px; margin-top: 3px;">吃瓜模式，专属脱单标识，不再被推荐</span>
          </div>
          <van-divider />
        </div>
      </van-popup>

    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { Toast, Notify } from "vant";
import { getHeightArray , MaritalStatusArray , EmotionStatusArray, EducationLevelArray, WorkIndustryArray, YearlySalaryArray} from "@/views/mine/constants/PersonInformationConstants";
import { areaList } from "@/assets/arealist/Area.js"
import { SexEnum, MaritalStatusEnum, EmotionStatusEnum} from "@/views/mine/enums/PersonInformationEnum";




export default {
  components: {},
  data() {
    return {
      activeNames: ['1', '2'],
      deviceName:'',
      userInfo:{
        username:'',
        birthday:'',
        birthdayName:'',
        height:'',
        heightName:'',
        heightCode:'',
        liveCityName:'',
        liveCityCode:'',
        homeTownName:'',
        homeTownCode:'',
        maritalStatusName:'',
        maritalStatusCode:'',
        emotionStatusName:'',
        emotionStatusCode:'',
        yearlySalaryName:'',
        yearlySalaryCode:'',
        platformId:'',
        headPhotoUrl: require('@/assets/icon/mine/cat.png'),
      },
      isTimePopup:false,
      currentDate:null,
      minDate: new Date(1925,1,1),
      maxDate: new Date(),
      singlePicker:{
        title:"",
        currentKey:"",
        dataList:[],
        isShow:false,
      },
      heightArray:[],
      isCityPopup:false,
      areaList:areaList,
      currentAreaType:'',
      LIVE_CITY:'liveCity',
      HOME_TOWN:'homeTown',
      isMaritalStatuPopup:false,
      isEmotionStatuPopup:false,
      PICKER_TYPE_HEIGHT:0,
      PICKER_TYPE_EDUCATION_LEVEL:1,
      PICKER_TYPE_WORK_INDUSTRY:2,
      PICKER_TYPE_YEARLY_SALARY:3,
      pickerDefaultIndex:0,
      areaDefaultValue:'350203',
      MaritalStatusEnum:MaritalStatusEnum,
      EmotionStatusEnum:EmotionStatusEnum,
    };
  },

  created(){
    this.heightArray = getHeightArray();
    this.requestUserInfo();
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
  },
  methods: {

    selectLine(){
      this.$router.push({ name: 'HelpAndFeedback' });
    },

    selectBirthday() {
      //禁止软键盘弹出
      document.activeElement.blur();
      this.isTimePopup = true;
      if(this.userInfo['birthday'] ==''){
        this.currentDate = new Date(1999, 9, 1);
      }
    },

    confirmBirthday(time) {
      this.userInfo['birthday'] = this.$formatDate(time, "yyyy-MM-dd");
      this.isTimePopup = false;

    },

    selectPicker(pickerType){
      this.singlePicker['currentKey'] = pickerType;
      this.singlePicker['isShow'] = true;
      if(pickerType == this.PICKER_TYPE_HEIGHT){
        this.singlePicker['title'] = "身高";
        this.singlePicker['dataList'] = this.heightArray;
        if(!this.userInfo['height']){
          if(this.userInfo['sex'] == SexEnum.SEX_BOY){
            this.pickerDefaultIndex = 35;
          }else if(this.userInfo['sex'] == SexEnum.SEX_GIRL){
            this.pickerDefaultIndex = 25;
          }
        }else {
          this.pickerDefaultIndex = this.matchArrayIndex(this.heightArray, this.userInfo['height']);
        }
      }else if(pickerType == this.PICKER_TYPE_EDUCATION_LEVEL){
        this.singlePicker['title'] = "最高学历";
        this.singlePicker['dataList'] = EducationLevelArray;
        if(this.userInfo['educationLevel'] == null){
          this.pickerDefaultIndex = 4;
        }else {
          this.pickerDefaultIndex = this.matchArrayIndex(EducationLevelArray, this.userInfo['educationLevel']);
        }
      }else if(pickerType == this.PICKER_TYPE_WORK_INDUSTRY){
        this.singlePicker['title'] = "行业";
        this.singlePicker['dataList'] = WorkIndustryArray;
      }else if(pickerType == this.PICKER_TYPE_YEARLY_SALARY){
        this.pickerDefaultIndex = 2;
        this.singlePicker['title'] = "年薪";
        this.singlePicker['dataList'] = YearlySalaryArray;
      }
    },

    pikerConfirm(item) {
      this.singlePicker['isShow'] = false;
      if(this.singlePicker['currentKey'] == this.PICKER_TYPE_HEIGHT) {
        this.userInfo['heightName'] = item['name'];
        this.userInfo['heightCode'] = item['code'];
      } else if(this.singlePicker['currentKey'] == this.PICKER_TYPE_EDUCATION_LEVEL) {
        this.userInfo['educationLevelName'] = item['name'];
        this.userInfo['educationLevelCode'] = item['code'];
      }else if(this.singlePicker['currentKey'] == this.PICKER_TYPE_WORK_INDUSTRY) {
        this.userInfo['workIndustryName'] = item['name'];
        this.userInfo['workIndustryCode'] = item['code'];
      }else if(this.singlePicker['currentKey'] == this.PICKER_TYPE_YEARLY_SALARY) {
        this.userInfo['yearlySalaryName'] = item['name'];
        this.userInfo['yearlySalaryCode'] = item['code'];
      }
    },

    selectCity(areaType){
      document.activeElement.blur();
      this.currentAreaType = areaType;
      this.isCityPopup = true;
      if(areaType == this.LIVE_CITY){
        this.areaDefaultValue = this.userInfo['liveCityCode'];
      }else if(areaType == this.HOME_TOWN){
        this.areaDefaultValue = this.userInfo['homeTownCode'];
      }
    },
    confirmPopup(data) {
      console.log("城市：" + JSON.stringify(data));
      console.log("当前地区类型：" + this.currentAreaType);
      this.isCityPopup = false;
      if(this.currentAreaType == this.HOME_TOWN){
        this.userInfo['homeTownName'] = data[2]['name'];
        this.userInfo['homeTownCode'] = data[2]['code'];
      }else if(this.currentAreaType == this.LIVE_CITY){
        this.userInfo['liveCityName'] = data[2]['name'];
        this.userInfo['liveCityCode'] = data[2]['code'];
      }
    },

    selectMaritalStatus(maritalStatus) {
      console.log("点击：");
      this.isMaritalStatuPopup = false;
      this.userInfo['maritalStatusCode'] = maritalStatus;
      if(maritalStatus == MaritalStatusEnum.MARITAL_STATUS_UNMARRIED){
        this.userInfo['maritalStatusName'] = '未婚';
      }else if(maritalStatus == MaritalStatusEnum.MARITAL_STATUS_MARRIED){
        this.userInfo['maritalStatusName'] = '已婚';
      }else if(maritalStatus == MaritalStatusEnum.MARITAL_STATUS_DIVORCE){
        this.userInfo['maritalStatusName'] = '离异';
      }else if(maritalStatus == MaritalStatusEnum.MARITAL_STATUS_WIDOWED){
        this.userInfo['maritalStatusName'] = '丧偶';
      }
    },

    selectEmotionStatus(emotionStatus) {
      this.isEmotionStatuPopup = false;
      this.userInfo['emotionStatusCode'] = emotionStatus;
      if(emotionStatus == EmotionStatusEnum.EMOTION_STATUS_SINGLE){
        this.userInfo['emotionStatusName'] = '单身中';
      }else if(emotionStatus == EmotionStatusEnum.EMOTION_STATUS_UNSINGLE){
        this.userInfo['emotionStatusName'] = '已脱单';
      }
    },

    requestUserInfo(){
      let that = this
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/info",
          params: {
          },
        })
        .then((result) => {
          console.log("用户信息：" + JSON.stringify(result));
          if(result && result['user']){
            this.userInfo = result['user'];
            this.matchPersonMsg();
          }
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },

    matchPersonMsg(){
      if(this.userInfo){
        if(this.userInfo['sex'] == SexEnum.SEX_BOY){
          this.userInfo['sexName'] = '男';
        }else if(this.userInfo['sex'] == SexEnum.SEX_GIRL){
          this.userInfo['sexName'] = '女';
        }
        if(this.userInfo['birthday'].length >= 10){
          this.userInfo['birthdayName'] = this.userInfo['birthday'].substring(0,10);
        }
        if(this.userInfo['height'] != null){
          this.userInfo['heightCode'] = this.userInfo['height'];
          this.userInfo['heightName'] = this.userInfo['height'] + "cm";
        }
        this.userInfo['liveCityCode'] = this.userInfo['liveCity'];
        this.userInfo['liveCityName'] = areaList['county_list'][this.userInfo['liveCityCode']];
        this.userInfo['homeTownCode'] = this.userInfo['homeTown'];
        this.userInfo['homeTownName'] = areaList['county_list'][this.userInfo['homeTownCode']];
        if(this.userInfo['maritalStatus'] != null){
          this.userInfo['maritalStatusCode'] = this.userInfo['maritalStatus'];
          this.userInfo['maritalStatusName'] = this.matchArrayName(MaritalStatusArray, this.userInfo['maritalStatus']);
        }
        if(this.userInfo['emotionStatus'] != null){
          this.userInfo['emotionStatusCode'] = this.userInfo['emotionStatus'];
          this.userInfo['emotionStatusName'] = this.matchArrayName(EmotionStatusArray, this.userInfo['emotionStatus']);
        }
        if(this.userInfo['educationLevel'] != null){
          this.userInfo['educationLevelCode'] = this.userInfo['educationLevel'];
          this.userInfo['educationLevelName'] = this.matchArrayName(EducationLevelArray, this.userInfo['educationLevel']);
        }
        if(this.userInfo['workIndustry'] != null){
          this.userInfo['workIndustryCode'] = this.userInfo['workIndustry'];
          this.userInfo['workIndustryName'] = this.matchArrayName(WorkIndustryArray, this.userInfo['workIndustry']);
        }
        if(this.userInfo['yearlySalary'] != null){
          this.userInfo['yearlySalaryCode'] = this.userInfo['yearlySalary'];
          this.userInfo['yearlySalaryName'] = this.matchArrayName(YearlySalaryArray, this.userInfo['yearlySalary']);
        }

        
      }
    },

    matchArrayName(arrayList, code){
      var name = "";
      if(arrayList != null){
        for(var i = 0; i < arrayList.length; i++){
          var item = arrayList[i];
          if(item['code'] == code){
            name = item['name'];
          }
        }
      }
      return name;
    },

    matchArrayIndex(arrayList, code){
      var index = 0;
      if(arrayList != null){
        for(var i = 0; i < arrayList.length; i++){
          var item = arrayList[i];
          if(item['code'] == code){
            index = i;
          }
        }
      }
      return index;
    },

    unModifyMsg(msg){
      Notify({
        type: "danger",
        message: msg + "不支持修改哦~",
      });
    },

    submitMsg(){
      this.userInfo['height'] = this.userInfo['heightCode'];
      this.userInfo['liveCity'] = this.userInfo['liveCityCode'];
      this.userInfo['homeTown'] = this.userInfo['homeTownCode'];
      this.userInfo['maritalStatus'] = this.userInfo['maritalStatusCode'];
      this.userInfo['emotionStatus'] = this.userInfo['emotionStatusCode'];
      this.userInfo['educationLevel'] = this.userInfo['educationLevelCode'];
      this.userInfo['workIndustry'] = this.userInfo['workIndustryCode'];
      this.userInfo['yearlySalary'] = this.userInfo['yearlySalaryCode']; 
      delete this.userInfo['password']; // 删除password属性
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/update",
          params: this.userInfo,
        })
        .then((result) => {
          this.$bus.$emit("refreshUserInfo", null);
          Notify({
            type: "success",
            message: "修改个人信息成功",
          });
          this.$router.go(-1);
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },



  



    
    





  },
};
</script>

<style lang="less" scoped>
  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .verticleCenter {
    align-items: center;
  }

  .detail-title {
    padding-left: 9px;
    position: relative;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: rgba(56, 56, 56, 1);
    &::before {
      position: absolute;
      content: "";
      top: 50%;
      left: 0;
      width: 4px;
      height: 16px;
      margin-top: -8px;
      background-color: @primary-color;
    }
  }

  /deep/.van-collapse-item__content {
    padding: 0px 16px;
  }

  /deep/.van-field__control {
    text-align: right;
  }

  /deep/.van-field--disabled .van-field__label {
    color: #707070;
    width: 2.2em;
  }

  /deep/.van-divider {
    margin: 0 0;
  }









</style>